<template>
	<view>
		<view class="itemTit hasFlex">套餐项目内容
			<view class="selView" v-if="detId == ''">自选</view>
			<view class="selView" v-else>{{serviceNum}}</view>
		</view>
		<view class="itemWrap">
			<view class="item spaceBet"
				v-for="(item,index) in cusServiceList"
				:key="index"
				@tap="selectCurrService(index,item.serviceId)"
			>
				<view class="checkMultiItem hasFlex" v-if="detId == ''">
					<view class="multi" :class="[item.selFlag ? 'active' : '']">
						<text class="iconfont icon-duihao"></text>
					</view>
				</view>
				<view class="itemContent spaceBet" :class="[detId == '' ? '' : 'specWid']">
					<view class="det ellip">{{item.serviceName}}</view>
					<!-- <view class="iconfont icon-xinxi" @tap.stop="showProMxIntro(index)"></view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			cusServiceList:Array,
			detId:'',
			serviceNum:Number
		},
		methods:{
			selectCurrService(index,id){
				this.$emit('selectCurrService',index,id);
			},
			showProMxIntro(index){
				this.$emit('showProMxIntro',index);
			}
		}
	}
</script>

<style lang='scss' scoped>
	.itemWrap{
		padding:20rpx 30rpx 0;
		background: #fff;
		.item{
			height: 90rpx;
			padding-bottom: 20rpx;
			.itemContent{
				width: 85%;
				height: 90rpx;
				line-height: 90rpx;
				background: #f0fffc;
				color: #00c496;
				font-size: $font-size30;
				border-radius: 10rpx;
				padding: 0 15rpx;
				.det{
					width: 90%;
				}
				.icon-xinxi{
					font-size:38rpx;
				}
				&.specWid{
					width: 96%;
					padding: 0 2%;
					.det{
						width: 96%;
					}
				}
			}
			.checkMultiItem{
				width: 12%;
				justify-content: center;
				align-items: center;
				.multi{
					width: 34rpx;
					height: 34rpx;
					border:1rpx solid #00c496;
					line-height: 34rpx;
					text-align: center;
					border-radius: 8rpx;
					.icon-duihao{
						color: #fff;
						font-size: $font-size30;
					}
					&.active{
						border: 1rpx solid #00c496;
						background:#00c496;
					}
				}
			}
		}
	}
	.itemTit{
		padding: 0 30rpx;
		border-bottom: 1rpx solid #eee;
		font-size: $font-size32;
		font-weight: bold;
		color: $pss-text-color3;
		background: #fff;
		height: 90rpx;
		line-height: 90rpx;
		align-items: center;
		.selView{
			font-weight: normal;
			font-size: $font-size22;
			color: #fff;
			padding: 0 12rpx;
			height: 34rpx;
			line-height: 34rpx;
			border-radius: 50rpx;
			background: #00c496;
			margin-left: 10rpx;
		}
	}
</style>